<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-15 23:07:58
 * @LastEditors: lyw
 * @LastEditTime: 2022-02-16 19:25:45
-->
<template>
  <div class="characteristic">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>特色产业带</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hotnews">
      <h3>热点资讯</h3>
    </div>
    <div class="chooseplace">
      <el-container class="product-nav">
        <div class="title">地区：</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="清远" name="qingyuan"></el-tab-pane>
          <el-tab-pane label="茂名" name="maoming"></el-tab-pane>
          <el-tab-pane label="潮州" name="chaozhou"></el-tab-pane>
          <el-tab-pane label="化州" name="huazhou"></el-tab-pane>
        </el-tabs>
        <div style="margin-left: 500px">
          <el-link href=" " target="_blank" style="min-width: 100px">
            更多
          </el-link>
        </div>
      </el-container>
    </div>
    <div style="width: 920px">
      <el-menu mode="horizontal">
        <el-menu-item index="1" @click="flag = true">商品</el-menu-item>
        <el-menu-item index="2" @click="flag = false">企业</el-menu-item>
      </el-menu>
      <good v-if="flag"></good>
      <supply v-if="!flag"></supply>
    </div>
  </div>
</template>

<script>
import good from "@/components/good.vue"
import supply from "@/components/supply.vue"
export default {
    components: {
      good,supply  
    },
  data() {
    return {
      flag: true,
      activeName: ""
    };
  },
  methods: {
      handleClick (tab, event) {
      console.log(tab, event)
    },
  }
};
</script>

<style scoped>
.hotnews {
  width: 900px;
  height: 150px;
  margin-top: 20px;
  border-left: 20px solid #f0eded;
  border-top: 20px solid #f0eded;
  background: #f0eded;
}
.chooseplace {
  background: #f0eded;
  width: 920px;
  margin-top: 20px;
  max-height: 100px;
}
.product-nav {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.product-nav .title {
  min-width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
</style>